mapWin = null;
// Date Range Vtypes
Ext.apply(Ext.form.VTypes, {
    daterange: function(val, field){
        var date = field.parseDate(val);
        
        if (!date) {
            return false;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else 
            if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
                var end = Ext.getCmp(field.endDateField);
                end.setMinValue(date);
                end.validate();
                this.dateRangeMin = date;
            }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Ext.ns('App', 'App.control');
App.control.editForm = Ext.extend(Ext.FormPanel, {
    // Prototype Defaults, can be overridden by user's config object
    labelAlign: 'top',
    frame: true,
	mapWin: null,
	onSave: function(btn, e){
            this.getForm().submit({
                clientValidation: true,
                url: '/test',
                method: 'post',
                params: {
                    request_type: 'new'
                },
                
                success: function(form, action){
                    Ext.Msg.alert('Success', action.result.msg);
                },
                failure: function(form, action){
                    Ext.Msg.alert('Fail', action.result.msg);
                }
            });
        },
    
    //title: 'Construction Impact Form',
    bodyStyle: 'padding:5px 5px 0',
    //    width: 650,
    autoScroll: true,
    reader: new Ext.data.JsonReader({
        root: 'record',
        fields: ['project', {
            name: 'start_date',
            type: 'date',
            dateFormat: 'm/d/Y'
        }, {
            name: 'end_date',
            type: 'date',
            dateFormat: 'm/d/Y'
        }, 'projectid', 'pm']
    }),
    
    
    buttons: [{
        text: 'Save',
        handler: this.onSave,
		scope: this
    }, {
        text: 'Cancel'
    }],
    onEditPolygon: function(btn, e){
    	mapWin = this.mapWin;
        if (mapWin) {
            mapWin.show()
            
        }
        else {
            mapWin = new App.control.mapField({
                width: 800,
                height: 400
            });
            mapWin.show();
			this.mapWin = mapWin;
        }
        
        mapWin.form = this;
        var geom_text = this.getForm().getValues().geometry;
        //clear the vector, vector_center layer
        
        vector.removeAllFeatures();
        //		vector_center.removeAllFeatures();
        
        if (geom_text != '') {
            //load the feature
            var geojson_format = new OpenLayers.Format.GeoJSON();
            var geom = geojson_format.read(this.getForm().getValues().project);
            var geom = geom[0].geometry.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
            
            vector.addFeatures(new OpenLayers.Feature.Vector(geom));
        }
        
        
        
        
    },
    initComponent: function(){
        // Called during component initialization
        
        // Config object has already been applied to 'this' so properties can 
        // be overriden here or new properties (e.g. items, tools, buttons) 
        // can be added, eg:
        /*
         Ext.apply(this, {
         propA: 3
         });*/
        // Before parent code
        //items has to be add here, because otherwise it will messup the FormPanel.items property
        Ext.apply(this, {
			id: 'app_edit_form',
            items: [{
                // Use the default, automatic layout to distribute the controls evenly
                // across a single row
                xtype: 'fieldset',
                title: 'Review Status (Official Use Only)',
                autoHeight: true,
                autoWidth: true,
                items: [{
                    xtype: 'radiogroup',
                    hideLabel: true,
                    width: 200,
                    items: [{
                        boxLabel: 'Public',
                        name: 'reviewstatus',
                        inputValue: 'Public'
                    }, {
                        boxLabel: 'Internal',
                        name: 'reviewstatus',
                        checked: true,
                        inputValue: 'Private'
                    }]
                }]
            
            }, {
                xtype: 'app_mapcontrol',
                id: 'app-mapcontrol-2',
                polygonFieldId: 'project'
            }, {
                xtype: 'button',
                handler: this.onEditPolygon,
                text: 'Edit Impact Polygon',
                scope: this
            }, {
            
                xtype: 'textfield',
                fieldLabel: 'ID',
                name: 'projectid',
                anchor: '95%',
                hidden: true,
                hideLabel: true,
                width: 10
            }, {
                xtype: 'textfield',
                allowBlank: false,
                fieldLabel: 'geometry',
                width: 400,
                hidden: false,
                id: 'geometry',
                name: 'geometry'
            }, {
                xtype: 'numberfield',
                allowBlank: false,
                fieldLabel: 'x',
                width: 400,
                hidden: false,
                id: 'x',
                name: 'x'
            }, {
                xtype: 'numberfield',
                allowBlank: false,
                fieldLabel: 'y',
                width: 400,
                hidden: false,
                id: 'y',
                name: 'y'
            }, {
                xtype: 'textfield',
                allowBlank: false,
                fieldLabel: 'Project',
                width: 400,
                hidden: false,
                id: 'project',
                name: 'project'
            }, {
                layout: 'column',
                
                items: [{
                    columnWidth: .2,
                    layout: 'form',
                    items: [{
                        width: 200,
                        allowBlank: false,
                        hideLabel: false,
                        xtype: 'datefield',
                        fieldLabel: 'Start',
                        name: 'start_date',
                        startDateField: 'startdt',
                        anchor: '95%'
                    }, {
                        xtype: 'textfield',
                        allowBlank: false,
                        fieldLabel: 'PM',
                        name: 'pm'
                    }]
                
                }, {
                    columnWidth: .2,
                    layout: 'form',
                    items: [{
                        anchor: '95%',
                        layout: 'form',
                        width: 200,
                        allowBlank: false,
                        xtype: 'datefield',
                        fieldLabel: 'End',
                        name: 'end_date',
                        startDateField: 'enddt'
                    }, {
                        allowBlank: false,
                        xtype: 'textfield',
                        fieldLabel: 'Project#',
                        name: 'projectno'
                    }]
                
                }]
            }, {
                xtype: 'fieldset',
                autoHeight: true,
                //                autoWidth: true,
                autoWidth: true,
                title: 'Impacts',
                //                defaultType: 'checkbox',
                items: [{
                    xtype: 'checkboxgroup',
                    width: 650,
                    //					autoWidth: true,
                    hideLabel: true,
                    items: [{
                        boxLabel: 'Sidewalk',
                        name: 'sidewalk',
                        hideLabel: true
                    }, {
                        boxLabel: 'Roadway',
                        name: 'roadway',
                        hideLabel: true
                    }, {
                        boxLabel: 'Garage',
                        name: 'garage',
                        hideLabel: true
                    }, {
                        boxLabel: 'ADA Parking',
                        name: 'adaparking',
                        hideLabel: true
                    }]
                }]
            }, {
                xtype: 'fieldset',
                autoHeight: true,
                width: 600,
                title: 'Description',
                collapsible: true,
                items: [{
                    xtype: 'htmleditor',
                    allowBlank: false,
                    name: 'description',
                    //                    id: 'bio',
                    //            fieldLabel:'Description',
                    height: 200,
                    hideLabel: true,
                    anchor: '98%'
                }]
            }]
        });
        
        // Call parent (required)
        App.control.editForm.superclass.initComponent.apply(this, arguments);
        
        // After parent code
        // e.g. install event handlers on rendered component
    },
    
    // Override other inherited methods 
    onRender: function(){
    
        // Before parent code
        
        // Call parent (required)
        EditForm.superclass.onRender.apply(this, arguments);
        // After parent code
    
    
    }
});

// register xtype to allow for lazy initialization
Ext.reg('editform', App.control.editForm);
